<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="layui/css/layui.css" />
		<style>
			.color1{
				height: 600px;
				background-color: palegoldenrod;
			}
			.color2{
				height: 600px;
				background-color: palegreen;
			}
			.color3{
				height: 600px;
				background-color: palevioletred;
			}
			.color4{
				height: 60px;
				background-color: rebeccapurple;
			}
			.color5{
				height: 60px;
				background-color: brown;
			}
			.news{
				width: 1200px;
				height: 400px;
				background-color: aqua;
				margin: 0 auto;
			}
			.color6{
				height: 100%;
				background-color: crimson;
			}
			.color7{
				height: 100%;
				background-color: gold;
			}
			
			/* 当屏幕小于575px时，使用以下样式 */
			/* 等于xs */
			@media (max-width:575px) {
				.news{
					width: 100%;
				}
			}
			/* 等于sm */
			@media (max-width:576px)  and (max-width:767px){
				.news{
					width: 100%;
				}
			}
			/* 等于md */
			@media (max-width:768px)  and (max-width:991px){
				.news{
					width: 768pxx;
				}
			}
			/* 等于lg */
			@media (max-width:992px){
				.news{
					width: 992pxx;
				}
			}
		</style>
	</head>
	<body>
		
		<div class="layui-row news">
			<div class="layui-col-xs12 layui-col-sm8 layui-col-md8 color6">
				左
			</div>
			<!-- 手机12份 平板4份 电脑8份 -->
			<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 color7">
				右
			</div>
		</div>
		
		<!-- 导航1 -->
		<div class="layui-row layui-hide-xs" style="margin-top: 50px;">
			<!-- 手机12份 平板8份 电脑4份 -->
			<div class="layui-col-xs3 layui-col-sm3 layui-col-md3 color4">
				
			</div>
			<!-- 手机12份 平板4份 电脑8份 -->
			<div class="layui-col-xs9 layui-col-sm9 layui-col-md9 color5">
				
			</div>
		</div>
		<!-- 导航2 -->
		<div class="layui-row layui-hide-md layui-hide-sm">
			<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 color5">
				<i class="layui-icon layui-icon-spread-left"></i>
			</div>
		</div>
		
		
		<!-- 创建一个栅格 12-->
		<div class="layui-row" style="margin-top: 50px;">
			<!-- 手机12份 平板8份 电脑4份 -->
			<div class="layui-col-xs12 layui-col-sm8 layui-col-md4 color1">
				
			</div>
			<!-- 手机12份 平板4份 电脑8份 -->
			<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 color2">
				
			</div>
			<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 color3">
				
			</div>
		</div>
	</body>
	<script src="layui/layui.js"></script>
</html>

